<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2016160236-204-鲁锰业-期末作业</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 光标特效 -->
    <style>
        /* Circle Text Styles */
        #outerCircleText {
            /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
            font-style: italic;
            font-weight: bold;
            font-family: 'comic sans ms', verdana, arial;
            color: #000;
            /* End Optional */

            /* Start Required - Do Not Edit */
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3000;
            cursor: default;
        }

        #outerCircleText div {
            position: relative;
        }

        #outerCircleText div div {
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
        }

        /* End Required */
        /* End Circle Text Styles */
    </style>
    <script type="text/javascript">

        /* Circling text trail- Tim Tilton
           Website: http://www.tempermedia.com/
           Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
           Modified Here for more flexibility and modern browser support
           Modifications as first seen in http://www.dynamicdrive.com/forums/
           username:jscheuer1 - This notice must remain for legal use
           */

        ; (function () {

            // Your message here (QUOTED STRING)
            var msg = "Believe you.Eventually you'll shine!";

            /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

            // Set font's style size for calculating dimensions
            // Set to number of desired pixels font size (decimal and negative numbers not allowed)
            var size = 20;

            // Set both to 1 for plain circle, set one of them to 2 for oval
            // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
            var circleY = 0.75; var circleX = 2;

            // The larger this divisor, the smaller the spaces between letters
            // (decimals allowed, not negative numbers)
            var letter_spacing = 5;

            // The larger this multiplier, the bigger the circle/oval
            // (decimals allowed, not negative numbers, some rounding is applied)
            var diameter = 10;

            // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
            var rotation = 0.4;

            // This is not the rotation speed, its the reaction speed, keep low!
            // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
            var speed = 0.3;

            ////////////////////// Stop Editing //////////////////////

            if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

            msg = msg.split('');
            var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
                ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
                o = document.createElement('div'), oi = document.createElement('div'),
                b = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body,

                mouse = function (e) {
                    e = e || window.event;
                    ymouse = !isNaN(e.pageY) ? e.pageY : e.clientY; // y-position
                    xmouse = !isNaN(e.pageX) ? e.pageX : e.clientX; // x-position
                },

                makecircle = function () { // rotation/positioning
                    if (init.nopy) {
                        o.style.top = (b || document.body).scrollTop + 'px';
                        o.style.left = (b || document.body).scrollLeft + 'px';
                    };
                    currStep -= rotation;
                    for (var d, i = n; i > -1; --i) { // makes the circle
                        d = document.getElementById('iemsg' + i).style;
                        d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
                        d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
                    };
                },

                drag = function () { // makes the resistance
                    y[0] = Y[0] += (ymouse - Y[0]) * speed;
                    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
                    for (var i = n; i > 0; --i) {
                        y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
                        x[i] = X[i] += (x[i - 1] - X[i]) * speed;
                    };
                    makecircle();
                },

                init = function () { // appends message divs, & sets initial values for positioning arrays
                    if (!isNaN(window.pageYOffset)) {
                        ymouse += window.pageYOffset;
                        xmouse += window.pageXOffset;
                    } else init.nopy = true;
                    for (var d, i = n; i > -1; --i) {
                        d = document.createElement('div'); d.id = 'iemsg' + i;
                        d.style.height = d.style.width = a + 'px';
                        d.appendChild(document.createTextNode(msg[i]));
                        oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
                    };
                    o.appendChild(oi); document.body.appendChild(o);
                    setInterval(drag, 25);
                },

                ascroll = function () {
                    ymouse += window.pageYOffset;
                    xmouse += window.pageXOffset;
                    window.removeEventListener('scroll', ascroll, false);
                };

            o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

            if (window.addEventListener) {
                window.addEventListener('load', init, false);
                document.addEventListener('mouseover', mouse, false);
                document.addEventListener('mousemove', mouse, false);
                if (/Apple/.test(navigator.vendor))
                    window.addEventListener('scroll', ascroll, false);
            }
            else if (window.attachEvent) {
                window.attachEvent('onload', init);
                document.attachEvent('onmousemove', mouse);
            };

        })();

    </script>

    <!-- 头部区域 -->
    <header class="w header">
        <ul>
            <li>
                <img src="images/lmy.jpg" alt="" width="180px" height="218px">
                <p class="people">
                    <strong>作者：</strong> <i>鲁锰业</i> <br>
                    <strong>班级：</strong> <i>土木204班</i>
                </p>
            </li>
            <li>
                <i class="timu"><a href="https://baike.baidu.com/item/%E4%BB%99%E4%BA%BA%E6%8E%8C/4967?fr=aladdin"
                        target="_blank"> 仙 人
                        掌 </a></i>
                <img src="images/xian_ren_zhang.jpg" alt="">
            </li>
            <li class="li_3">
                <img src="images/flower.jpg" alt="" width="300px" height="275px">
                <h2>仙人掌花</h2>
                <p>我们要年少有为，就要像仙人掌一样，在挫折、折磨、甚至失败的面前，也从不言说放弃。</p>
                <audio src="陆健 - 年少有为（翻自 Ronghao Li 李荣浩）.mp3" autoplay="autoplay"></audio>
            </li>
        </ul>
    </header>

    <!-- 上导航栏 -->
    <nav class="nav w">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">分布范围</a></li>
            <li><a href="#">生长环境</a></li>
            <li><a href="#">繁殖方法</a></li>
            <li><a href="#">栽培技术</a></li>
            <li><a href="#">经济价值</a></li>
            <li><a href="#">病虫防治</a></li>
        </ul>
    </nav>

    <!-- 个人介绍，导航栏与科普 -->
    <div class="w">
        <div class="jie_shao">
            <h1>个人介绍</h1>
            <marquee onmouseover="stop()" onmouseout="start()" direction="up">
                <p class="jianjie">
                    我是土木204班的鲁锰业，来自海滨城市--湛江。迈进大学校门，很高兴与你们相遇，结识，并与之共度大学美好时光，还请大家多多关照与包容。
                    我性格开朗活泼，平易近人，在平时能做到将心比心，或许与我生活的城市有关吧!对待大家，我会带着一份热情与真诚，珍惜与大家难得的缘分，珍惜我们之间的同学情，校友情我比较喜欢打羽毛球，希望在大学能遇到一些志同道合的球友，在人际关系方面，我比较喜欢交朋友，毕竟多一位朋友就多点见识，人脉关系更广！
                    “吃得苦中苦,方为人上人”,我一定会尽自己的努力、过一个充实而又意义的大学生活！
                </p>
            </marquee>
            <strong>座右铭:</strong>
            <p class="lizhi">Believe you.Eventually you'll shine! </p>

        </div>

        <div>
            <div class="menu">
                <div class="jie_1">
                    <img src="images/ku.jpg" alt="" width="160px" height="225px">
                    <h2>基础介绍</h2>
                    <p>
                        仙人掌（石竹沙漠植物）是仙人掌科缩刺仙人掌的变种。丛生肉质灌木，高1.5-3米。上部分枝宽倒卵形、倒卵状椭圆形或近圆形，绿色至蓝绿色，无毛；刺黄色，有淡褐色横纹，坚硬；倒刺直立。叶钻形，绿色，早落。花辐状；花托倒卵形，基部渐狭，绿色；萼状花被黄色，具绿色中肋；花丝淡黄色；花药黄色；花柱淡黄色；柱头黄白色。浆果倒卵球形，顶端凹陷，表面平滑无毛，紫红色，倒刺刚毛和钻形刺。种子多数扁圆形，边缘稍不规则，无毛，淡黄褐色。花期6-10（-12)月。
                    </p>
                </div>
                <div class="jie_2">
                    <h2>仙人掌科的发展历史</h2>
                    <p>
                        仙人掌科原产于北美和南美，从不列颠哥伦比亚和亚伯达省向南的大部分地区，其南界达到智利和阿根廷。墨西哥的仙人掌种类最多，仙人掌科植物是个大家族，它的成员至少在两千种以上，它的故乡在美洲和非洲，其中尤以墨西哥分布的种类最多，素有“仙人掌王国”之称。
                    </p>
                    <p>
                        仙人掌被墨西哥人誉为“仙桃”。当地有个优美的传说，一只巨大的山鹰叼着一条蛇，为寻找栖身之地，到处飞翔。当它落到一丛开满黄花的仙人掌上后，再也不愿离开。从此墨西哥人便在这一富有生机的地方建立起自己的家园——墨西哥城。
                    </p>
                </div>
                <div class="jie_3">
                    <h2>科普时间</h2>
                    <h4>仙人掌真的可以防辐射吗？</h4>
                    <p>
                        经常有花友留言，问仙人球、仙人掌是不是真的能防辐射？是不是真的有净化空气的作用？那到底是真是假呢？让我们看看下面的一个科普视频了解一下!
                    </p>
                    <video src="images/ke_pu.mp4" width="440px" controls="controls"
                        poster="images/video_img.jpg"></video>
                </div>
                <div class="footer">
                    <img src="images/footer.jpg" alt="" width="740" height="150">
                    <marquee onmouseover="stop()" onmouseout="start()">
                        土木204鲁锰业&copy;版权所有
                    </marquee>
                </div>
            </div>
            <nav class="you_lan">
                <img src="images/nav_h.jpg" alt="" width="230">
                <ul>
                    <li><a href="#"> ● 名家论述</a></li>
                    <li><a href="#"> ● 临床应用</a></li>
                    <li><a href="#"> ● 花友趣事</a></li>
                    <li><a href="#"> ● 头条消息</a></li>
                </ul>
                <h2>仙人掌的花语</h2>
                <p>
                    仙人掌拥有外刚内柔之心。造物之初，仙人掌是世界上最柔弱的东西，她娇嫩如水，轻轻一触碰便可能失去了生命。上帝不忍心，在她的心上加上了一套盔甲，坚硬如铁，上面还带有伤人的钢刺。从此，再也没有人能看到仙人掌之心了，凡是接近她的生物都会鲜血淋漓。之后，有一位勇者要铲除这恶物，剑出刀落，仙人掌变成了两半，从中却是绿色的液体。原来，那是被封存的仙人掌之心，由于无人了解其中的寂寞，化成了滴滴泪珠，绿色的泪珠使柔弱的仙人掌更凸显了她的坚强。所以仙人掌的花语是——坚强。
                </p>
            </nav>
        </div>
    </div>

    <nav class="zuo_lan">
        <ul>
            <li><a href="#"> ◮ 形态特征</a></li>
            <li><a href="#"> ◮ 主要价值</a></li>
            <li><a href="#"> ◮ 历史记载</a></li>
            <li><a href="#"> ◮ 主要亚科</a></li>
            <li><a href="#"> ◮ 进化来源</a></li>
        </ul>
    </nav>
</body>

</html>